<template>
    <div>
        <el-popover
            ref="popover"
            placement="bottom-start"
            :width="realWidth*1.2"
            trigger="manual"
            v-model="visible"
        >
            <el-input
                ref="input"
                :id="id"
                slot="reference"
                :style="{width:width}"
                v-model="labelValue"
                :placeholder="$t('common.pla.pleaseSelect')"
                @keyup.native="handleChange"
                @blur="handleBlur"
                @click.native="handleClick"
            ></el-input>
            <div class="list">
                <ul v-if="showData&&showData.length!=0">
                    <template v-if="showData.length===1&&showData[0].isEmpty">
                        <div class="empty-tip">{{showData[0].label}}</div>
                    </template>
                    <template v-else>
                        <li
                            v-for="(item,index) in showData"
                            :key="index"
                            @click="handleSelect(item)"
                            :class="value!=null&&value==item.value?'current-item':null"
                            :title="item.label"
                        >{{item.label}}</li>
                    </template>
                </ul>
                <el-row class="page-btns" v-if="showPage">
                    <el-col :span="6">
                        <el-button type="text" :disabled="pageIndex==0" @click="pageFirst">首页</el-button>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="text" :disabled="pageIndex==0" @click="pagePrev">上一页</el-button>
                    </el-col>
                    <el-col :span="6">
                        <el-button
                            type="text"
                            :disabled="pageIndex==pageCount-1"
                            @click="pageNext"
                        >下一页</el-button>
                    </el-col>
                    <el-col :span="6">
                        <el-button
                            type="text"
                            :disabled="pageIndex==pageCount-1"
                            @click="pageLast"
                        >末页</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-popover>
    </div>
</template>
<script>
export default {
    name: "PagerSelect",
    props: {
        width: {
            default: "100%"
        },
        data: {
            default: null
        },
        pageSize: {
            default: 5
        },
        value: {
            default: null
        },
        readonly: {
            default: false
        },
        notClear: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            visible: false,
            id: null,
            labelValue: null,
            labelValueTmp: null,
            sourceData: null,
            showData: null,
            indexAttr: Symbol(),
            showPage: false,
            pageIndex: 0,
            pageCount: 0,
            clearTimeoutId: null,
            realWidth: 0
        };
    },
    created() {
        this.id = "select-tree-" + Math.floor(Math.random() * 100000);
    },
    mounted() {
        let input = document.getElementById(this.id);
        if (input && input.offsetWidth) {
            this.realWidth = input.offsetWidth;
        } else {
            this.realWidth = this.width;
        }
        if (this.data instanceof Array) {
            this.data.forEach(v => {
                if (v.label != null) {
                    v.label = v.label.replace(/(^\s*)|(\s*$)/g, "");
                }
            });
            this.sourceData = _.cloneDeep(this.data);
        } else {
            this.sourceData = [];
        }
        this.initPage();
        if (this.value != null) {
            let option = this.sourceData.find(s => s.value == this.value);
            if (option) {
                this.labelValue = option.label;
                this.labelValueTmp = option.label;
            }
        }
    },
    watch: {
        value: function(val) {
            if (val == null) {
                this.labelValue = null;
                this.labelValueTmp = null;
            } else {
                let option = this.sourceData.find(s => s.value == val);
                this.labelValue = option ? option.label : (this.notClear ? val : null);
                this.labelValueTmp = this.labelValue;
            }
        }
    },
    methods: {
        createDataIndex() {
            this.sourceData.forEach((v, index) => {
                v[this.indexAttr] = index;
            });
        },
        pageFirst() {
            this.pageIndex = 0;
            this.showData = this.sourceData.filter(
                v => v[this.indexAttr] < this.pageSize
            );
            this.cancelClearTimeout();
            this.$refs.popover.createPopper();
        },
        pageLast() {
            this.pageIndex = this.pageCount - 1;
            this.showData = this.sourceData.filter(
                v =>
                    v[this.indexAttr] < this.pageCount * this.pageSize &&
                    v[this.indexAttr] >= (this.pageCount - 1) * this.pageSize
            );
            this.cancelClearTimeout();
            this.$refs.popover.createPopper();
        },
        pageNext() {
            this.pageIndex++;
            this.showData = this.sourceData.filter(
                v =>
                    v[this.indexAttr] < (this.pageIndex + 1) * this.pageSize &&
                    v[this.indexAttr] >= this.pageIndex * this.pageSize
            );
            this.cancelClearTimeout();
            this.$refs.popover.createPopper();
        },
        pagePrev() {
            this.pageIndex--;
            this.showData = this.sourceData.filter(
                v =>
                    v[this.indexAttr] < (this.pageIndex + 1) * this.pageSize &&
                    v[this.indexAttr] >= this.pageIndex * this.pageSize
            );
            this.cancelClearTimeout();
            this.$refs.popover.createPopper();
        },
        handleSelect(item) {
            this.labelValue = item.label;
            this.labelValueTmp = item.label;
            this.$emit("input", item.value);
        },
        initPage() {
            this.showPage = false;
            this.pageIndex = 0;
            if (this.sourceData.length == 0 || this.pageSize == 0) {
                this.pageCount = 0;
                this.showData = [
                    { label: "无相关数据", value: 0, isEmpty: true }
                ];
            } else {
                if (this.sourceData.length % this.pageSize == 0) {
                    this.pageCount = Math.floor(
                        this.sourceData.length / this.pageSize
                    );
                } else {
                    this.pageCount =
                        Math.floor(this.sourceData.length / this.pageSize) + 1;
                }
            }
            if (this.sourceData.length > 0) {
                this.createDataIndex();
                if (this.sourceData.length <= this.pageSize) {
                    this.showData = this.sourceData;
                } else {
                    this.showPage = true;
                    this.showData = this.sourceData.filter(
                        v => v[this.indexAttr] < this.pageSize
                    );
                }
            }
        },
        handleChange() {
            this.sourceData = _.cloneDeep(
                this.data.filter(v => v.label.indexOf(this.labelValue) >= 0)
            );
            this.initPage();
            this.$refs.popover.createPopper();
        },
        handleBlur() {
            if (this.clearTimeoutId) {
                clearTimeout(this.clearTimeoutId);
            }
            this.clearTimeoutId = setTimeout(() => {
                this.visible = false;
                this.labelValue = this.labelValueTmp;
            }, 200);
        },
        handleClick() {
            if (!this.visible) {
                this.visible = true;
                this.sourceData = _.cloneDeep(this.data);
                this.initPage();
            }
        },
        cancelClearTimeout() {
            if (this.clearTimeoutId) {
                clearTimeout(this.clearTimeoutId);
                this.clearTimeoutId = null;
            }
            this.$refs.input.focus();
        }
    }
};
</script>
<style lang="scss" scoped>
.list {
    width: 100%;
    background: #fff;
    ul {
        margin: 0;
        padding: 5px;
    }
    ul li {
        margin: 0;
        list-style-type: none;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #606266;
        height: 34px;
        line-height: 34px;
        cursor: pointer;
    }
    ul li:hover {
        color: #3a7fe8;
        background: #ebf2ff;
    }
    ul li.current-item {
        color: #3a7fe8;
        background: #ebf2ff;
    }
    .page-btns {
        text-align: center;
    }
    .empty-tip {
        color: #c0c0c0;
        text-align: center;
    }
}
</style>